document.querySelector('ul').addEventListener('mousemove', e => {
    if (e.target.tagName != 'LI') return;
    const obj = document.querySelector('.active');
    if (!obj) {
        e.target.classList.add('active')
    } else {
        obj.classList.remove('active')
        e.target.classList.add('active')
    }
});

document.querySelector('ul').addEventListener('mouseout', e => {
    if (e.target.tagName != 'LI') return;
    e.target.classList.remove('active')
});

document.querySelector('ul').addEventListener('click', e => {
    if (e.target.tagName != 'LI') return;
    document.querySelector('.activeClick').classList.remove('activeClick')
    e.target.classList.add('activeClick')
});